<template>
  <div>
    <div>
      <!-- <el-form ref="searchForm" :rules="rules" :inline="true" :model="searchForm">
        <el-form-item label="姓名" prop="cert_name">
          <el-input v-model="searchForm.cert_name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="searchForm.mobile" placeholder="请输入电话" clearable />
        </el-form-item>
        <el-form-item label="身份证号" prop="cert_no">
          <el-input v-model="searchForm.cert_no" placeholder="请输入身份证号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询征信报告</el-button>
          <el-button size="small" @click="reset()">重置搜索条件</el-button>
        </el-form-item>
      </el-form>-->
      <el-button size="small" type="primary" @click="search()">查询征信报告</el-button>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />征信查询列表
      </h5>
    </div>
    <!-- <el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabList" :label="item.name" :key="item.id" :name="item.id" />
    </el-tabs>-->
    <div class="common_form_search">
      <el-form ref="searchForm1" :inline="true" :model="searchForm1">
        <el-form-item label="状态" prop="is_success">
          <el-select v-model="searchForm1.is_success" placeholder="请选择查询状态" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="cert_name">
          <el-input v-model="searchForm1.cert_name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="searchForm1.mobile" placeholder="请输入电话" clearable />
        </el-form-item>
        <el-form-item label="身份证号" prop="cert_no">
          <el-input v-model="searchForm1.cert_no" placeholder="请输入身份证号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getList">搜索</el-button>
          <el-button size="small" @click="resetList">清空</el-button>
          <el-button size="small" @click="refreshList">刷新当前列表</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border v-loading="tbLoading">
      <el-table-column align="center" prop="id" label="ID" width="50" />
      <el-table-column align="center" prop="cert_no" label="身份证号" />
      <el-table-column align="center" prop="cert_name" label="姓名" width="70" />
      <el-table-column align="center" label="电话">
        <template slot-scope="scope">{{ encryptPhoneNumber(scope.row.mobile) }}</template>
      </el-table-column>
      <el-table-column align="center" prop="start_at" label="查询时间" />
      <el-table-column align="center" label="查询状态" prop="is_success">
        <template slot-scope="scope">{{ scope.row.is_success == '3' ? '申请中' : '成功' }}</template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.is_success === 1"
            type="primary"
            size="mini"
            @click="handleView(scope.row)"
          >查看征信报告</el-button>
          <el-button v-if="scope.row.is_success === 3" type="primary" disabled size="mini">报告生成中</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
    <new-select-risk2 ref="newSelectRisk2" :creditData="result"></new-select-risk2>
    <searchCredit ref="searchCredit" @refreshList="refreshList"></searchCredit>
  </div>
</template>

<script>
import { getCreditNewList } from '@/api/order'
import customPage from '@/components/customPage'
import newSelectRisk2 from './dialogs/newSelectRisk2'
import searchCredit from './dialogs/searchCredit'

export default {
  components: { customPage, newSelectRisk2, searchCredit },
  data() {
    return {
      tbLoading: false,
      result: '',
      searchForm: {
        cert_name: '',
        mobile: '',
        cert_no: '',
      },
      searchForm1: {
        cert_name: '',
        mobile: '',
        cert_no: '',
        is_success: '',
      },
      total: 0,
      tableData: [],
      routerName: '',
      searchResult: '',
      rules: {
        cert_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        cert_no: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
      },
      key: 'company202410121751',
      service: 'credit2',
      options: [
        {
          value: '1',
          label: '成功',
        },
        {
          value: '3',
          label: '查询中',
        },
      ],
    }
  },
  created() {
    if (this.$route.query.shopname) {
      this.routerName = this.$route.query.shopname
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    encryptPhoneNumber(phone) {
      const reg = /(\d{3})\d{4}(\d{4})/
      return String(phone).replace(reg, '$1****$2')
    },
    // 查询
    search() {
      this.$refs.searchCredit.dialogVisible = true
    },
    refreshList() {
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        cert_name: '',
        mobile: '',
        cert_no: '',
      }
      this.$refs['searchForm'].resetFields()
    },
    resetList() {
      this.searchForm1 = {
        cert_name: '',
        mobile: '',
        cert_no: '',
        is_success: '',
      }
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      this.tbLoading = true
      getCreditNewList({ page, pageSize, ...this.searchForm1 })
        .then((res) => {
          this.tableData = res.data || []
          this.total = res.total
        })
        .finally(() => {
          this.tbLoading = false
        })
    },
    handleView(row) {
      this.result = {
        result: row.result,
        start_at: row.start_at || '',
        order_no: row.order_no || '',
      }
      this.$refs.newSelectRisk2.dialogVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
